<template>
  <div>
    <el-dialog :title="editInfo.status==5?'隐患详情':'事件处理'" :visible.sync="dialogVisible" width="100%" :before-close="closeEditDialog"
      :close-on-click-modal="false" :append-to-body="true">

      <div class="timeline-container">

        <el-timeline>

          <el-timeline-item color="#7367F0" size="large" v-if="editInfo.mode==0||editInfo.status==5">
              <div class="item-title">
                完成 
              </div>
          </el-timeline-item>

          <el-timeline-item color="#7367F0" size="large" v-for="(item,index) in Details" :key="index">
            <!-- 上报内容 -->
            <div v-if="item.status==2 || editInfo.mode==0">
              <div class="item-title">
                上报内容 <span>{{ item.createTime }}</span>
              </div>
              <div class="info-box">
                <div class="info-row">
                  <div><span class="label">设备编码：</span>{{ editInfo.imei }}</div> 
                  <div><span class="label">单位名称：</span>{{ editInfo.orgName }}</div> 
                  <div><span class="label">安装点名称：</span>{{ editInfo.spaceName }}</div>
                </div>
                <div class="info-row">
                  <div><span class="label">产品类型：</span>{{editInfo.deviceType=='DoorMagnetism'?'门磁':
                  editInfo.deviceType=='Camera'?'摄像机':
                  editInfo.deviceType=='GasSensor'?'燃气':
                  editInfo.deviceType=='Infrared'?'红外':'烟感'}}</div>
                  <div><span class="label">处理方式：</span>{{ editInfo.mode== 0 ? '现场处理' : '上报工单' }}</div>
                  <div><span class="label">上报人手机号：</span>{{ editInfo.mobile }}</div>
                </div>
                <!-- 上报工单 -->
                <div class="info-row" v-if="editInfo.mode==1">
                  <div class="label">隐患内容：</div>
                  <div class="content">{{ item.handleContent }}
                  </div> 
                </div>
               <!-- 现场处理 -->
               <div class="info-row" v-if="editInfo.mode==0">
                  <div class="label">隐患描述：</div>
                  <div class="content">{{ item.handleContent }}
                  </div> 
                </div>
                <div class="info-row" v-if="editInfo.mode==0">
                  <div class="label">处理意见：</div>
                  <div class="content">{{ item.handleResult }}
                  </div> 
                </div>

                <div class="info-row" v-if="item.fileList!=null && item.fileList!=''">
                  <div class="image-box" >
                    <el-image class="elImage" :src="item2" v-for="(item2,index) in item.fileList" :key="index" :preview-src-list="item.fileList"
                     v-if="item2.indexOf('.png')!=-1 || item2.indexOf('.jpg')!=-1"></el-image>
                    <video ref="videoPlayer" :src="item2" controls class="elImage" v-else></video>
                  </div>
                </div>
              </div>
            </div>

            <div v-else>
              <div class="item-title">
                {{item.status==3?'隐患审核':item.status==4?'处理工单':'处理审核'}} <span>{{ item.createTime }}</span> {{ item.handleResult }}
              </div>
              <div class="info-box">
                <div class="info-row">
                  <div class="label">{{item.status==3?'审核意见：':item.status==4?'处理内容：':'处理审核：'}}</div>
                  <div class="content">{{ item.handleContent }}
                  </div> 
                </div>
              </div>
            </div>

          </el-timeline-item>
        
          <!-- 事件处理 -->
          <el-timeline-item color="#7367F0" size="large" v-if="editInfo.mode==1&&editInfo.status!=5">
            <div >
              <div class="item-title">
                {{ editInfo.status==1?'上报内容':editInfo.status==2?'隐患审核':editInfo.status==3?'处理工单':'处理审核' }}
              </div>
              <div class="info-box">

                <div class="info-row" v-if="editInfo.status==1">
                  <div><span class="label">设备编码：</span>{{ editInfo.imei }}</div> 
                  <div><span class="label">单位名称：</span>{{ editInfo.orgName }}</div> 
                  <div><span class="label">安装点名称：</span>{{ editInfo.spaceName }}</div>
                </div>
                <div class="info-row" v-if="editInfo.status==1">
                  <div><span class="label">产品类型：</span>{{editInfo.deviceType=='DoorMagnetism'?'门磁':
                  editInfo.deviceType=='Camera'?'摄像机':
                  editInfo.deviceType=='GasSensor'?'燃气':
                  editInfo.deviceType=='Infrared'?'红外':'烟感'}}</div>
                  <div><span class="label">处理方式：</span>{{ editInfo.mode== 0 ? '现场处理' : '上报工单' }}</div>
                  <div><span class="label">上报人手机号：</span>{{ editInfo.mobile }}</div>
                </div>

                 <!-- 处理工单 -->
                <div class="info-row" v-if="editInfo.status==3">
                  <div class="label start">
                    处理结果：
                  </div>
                  <div style="width: 100%;">
                    <el-select v-model='handleResult' style="width: 25%;" placeholder='请选择处理结果' size="small">
                      <el-option v-for='(item,index) in handleResultList' :label='item' :value='item' :key='index'>
                      </el-option>
                    </el-select>
                  </div>
                </div>

                <div class="info-row">
                  <div class="label start">
                    {{ editInfo.status==1?'隐患内容：':editInfo.status==2?'审核意见：':editInfo.status==3?'处理内容':'处理审核' }}
                  </div>
                    <el-input type="textarea" :rows="4" :placeholder="Placeholder" v-model="handleContent" resize='none' :autosize="{ minRows: 4, maxRows: 5 }"
                    style="width: 100%;" maxlength="100">
                    </el-input>
                </div>

                <!-- 上报内容 -->
                <div class="info-row" v-if="editInfo.status==1">
                  <div class="label">
                    上传图片
                  </div>
                  <div style="width: 100%;">
                    <el-upload :class="{ disabled: uploadDisabled }" :on-remove="handleRemove" :on-change="uploadSectionFile"
                      :action="baseUrl" list-type="picture-card" accept=".jpg,.png" :on-preview="handlePictureCardPreview"
                      :headers="headers" :before-upload="beforeAvatarUpload" :on-success="handleSuccessFunction" :limit='6'
                      :on-exceed="handleExceedScene" :file-list="fileList"  :on-error="uploadFileError">
                      <i class="el-icon-plus"></i>
                    </el-upload>
                  </div>
                </div>

                <div class="btn-row">
                  <el-button size="small" @click="addSubmit('不通过')" v-if="editInfo.status==2||editInfo.status==4" v-preventReClick="1000">不通过</el-button>
                  <el-button size="small" type="primary" @click="addSubmit('通过')" v-preventReClick="1000">
                    {{ editInfo.status==1?'提交':editInfo.status==2?'通过':editInfo.status==3?'提交':'通过' }}
                  </el-button>
                </div>

              </div>
            </div>
          </el-timeline-item>

        </el-timeline>

      </div>
      <!-- <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="closeEditDialog">关 闭</el-button>
      </span> -->
    </el-dialog>

    <el-dialog :visible.sync="dialogVisible2">
      <img width="100%" :src="dialogImageUrl" alt="">
    </el-dialog>
  </div>
</template>

<script>
import { mapState } from "vuex";
import {
  reqAuditUpdate
} from '@api/api.js';
import asc from "@utils/asc.js"; //加密解密

export default {
  name: "add",
  props: [""],
  components: {},
  data() {
    return {
      dialogVisible: false,
      dialogVisible2:false,
      dialogImageUrl: "",
      reverse: true,
      activities: [{
        content: '活动按期开始',
        timestamp: '2018-04-15'
      }, {
        content: '通过审核',
        timestamp: '2018-04-13'
      }, {
        content: '创建成功',
        timestamp: '2018-04-11'
      }],
      Details: [],
      image: require("@assets/images/account_bg.png"),
      editInfo:{},
      handleContent:"",
      handleResult:"已修复",
      handleResultList:['已修复','已忽略',],
      videoUrl:"https://tagan.oss-cn-shenzhen.aliyuncs.com/2023/08/29/67fba339b61746aa9413082efb3a9fe546QUBnuPUfLAaa3665924d786dc3531df43e8b4ad34b.mp4",

      // 图片上传
      uploadDisabled: false, //加号默认显示
      headers: {
        token: asc.decrypt(sessionStorage.getItem("token")),
      },
      fileList: [],
      picList: [],
      // 图片上传结束
    };
  },
  watch: {
    
  },
  computed: {
    ...mapState(["user"]),
    Placeholder(){
      if(this.editInfo.status==1){
        return '请输入隐患内容'
      }else if(this.editInfo.status==2){
        return '请输入审核意见'
      }else if(this.editInfo.status==3){
        return '请输入处理内容'
      }else if(this.editInfo.status==4){
        return '请输入处理审核'
      }
    },
  },
  methods: {
    async addSubmit(e) {
      if (this.handleContent=='' || this.handleContent==null) return this.$modal.notifyWarning(this.Placeholder);
      const res=await reqAuditUpdate({
        auditId:this.editInfo.id,
        userId:this.editInfo.userId,
        status:this.editInfo.status,
        handleContent:this.handleContent,
        handleResult: this.editInfo.status==1?'': this.editInfo.status==3?this.handleResult: e,
        fileList:this.picList
      })
      if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
      this.$modal.notifySuccess("处理成功");
      this.closeEditDialog()
      this.$parent.getDataList()
    },
    // 点击关闭弹框
    closeEditDialog() {
      this.dialogVisible = false;
      this.picList=[];
      this.fileList=[];
      this.handleContent='';
      this.handleResult='已修复';
      this.uploadDisabled = false;
    },

     // 上传文件之前的钩子
     beforeAvatarUpload(file) {
      let isJPG = true;
      if (file.type !== "image/png" && file.type !== "image/jpeg") {
        this.$message.error("图片只能是 jpg/png 格式!");
        isJPG = false;
      }
      let isLt = file.size / 1024 < 20000; // 判断是否小于500Kb  500
      if (!isLt) {
        this.$modal.notifyWarning("图片大小不能超过20MB! 请重新上传");
        this.uploadDisabled = false;
        isJPG = false;
      }
      return isJPG;
    },
     //删除照片
     handleRemove(file, fileList) {
      // console.log(fileList);
      this.picList = [];
      fileList.forEach((item) => {
        if (item.response) {
          this.picList.push(item.response.data.url);
        } else {
          this.picList.push(item.url);
        }
      });
      setTimeout(() => {
        this.uploadDisabled = false;
      }, 1000);
    },
    uploadSectionFile(file, fileList) {
      if(fileList.length >= 6){
         this.uploadDisabled = true; //隐藏加号
      }
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible2 = true;
    },
    // 上传成功
    handleSuccessFunction(response, file, fileList) {
      this.picList.push(file.response.data.url);
    },
     // 文件超出个数限制时的钩子
     handleExceedScene() {
      this.$modal.notifyWarning(`最多上传6张`);
    },
     	//上传失败
       uploadFileError(err, file, fileList){
         this.uploadDisabled = false; 
	    },
  },
  mounted() {
  },
  created() {
  },
};
</script>

<style lang="less" scoped>
@import url("../../../common.less");

::v-deep .el-dialog {
  height: 100% !important;
  max-height: 100vh;
}

.timeline-container {
  width: 1000px;
  margin: 0 auto;
  padding: 30px;
  color: @primaryThemeTxtColor2;

  .item-title {
    font-size: 16px;
    color: #7367F0;
    margin: 16px 0;
    >span{
      opacity: 0.8;
      margin:0 20px;
    }
  }

  .info-box {
    margin-left: 20px;
    line-height: 28px;
    .info-row{
      display: flex;
      justify-content: space-between;
      margin: 8px 0;
      color: @primaryThemeTxtColor2;
      >div{
        width: 33%;
      }
      .label{
        width: 100px;
        display: inline-block;
      }
      // ✳号必填
      .start:before{
        content: "*";
        color: #f56c6c;
        margin-right: 4px;
      }
      .content{
        width: 100%;
        background: @primaryBgcolor9;
        border-radius: 5px;
        padding: 8px;
        min-height: 100px;
        box-sizing: border-box;
      }
      .image-box{
        width: 100%;
        margin-left: 95px;
        display: flex;
        flex-wrap: wrap;
        .elImage{
          width: 32%;
          height: 171px;
          margin-right: 10px;
          margin-bottom: 10px;
        }
      }
    }
    .btn-row{
      text-align: right;
    }
  }
}

// 竖线样式
::v-deep .el-timeline-item__tail {
  border-left: dashed 1px #7367F0;
}

// 隐藏加号
/deep/ .disabled .el-upload--picture-card {
  display: none !important;
}

::v-deep .el-textarea__inner{
  background: @primaryBgcolor9 !important;
}
</style>